<template>
  <div class="flex-center-between">
    <div
      class="pv16 ph24 box"
      :style="{
        background: selectTypeIndex === 1 ? 'var(--primary10)' : 'rgba(250, 250, 250, 1)',
        'box-shadow': `inset 0px -4px 0px 0px ${selectTypeIndex === 1 ? 'var(--primary)' : 'rgba(250, 250, 250, 1)'}`
      }"
      @click="setType(1)"
    >
      <img src="./images/all.png" style="width: 32px; height: 32px" />
      <div class="ml12">
        <div style="color: rgba(118, 120, 133, 1); line-height: 14px">全部合同</div>
        <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ summary.allCount || 0 }}</div>
      </div>
    </div>
    <div
      class="pv16 ph24 ml24 box"
      :style="{
        background: selectTypeIndex === 2 ? 'var(--primary10)' : 'rgba(250, 250, 250, 1)',
        'box-shadow': `inset 0px -4px 0px 0px ${selectTypeIndex === 2 ? 'var(--primary)' : 'rgba(250, 250, 250, 1)'}`
      }"
      @click="setType(2)"
    >
      <img src="./images/willExpire.png" style="width: 32px; height: 32px" />
      <div class="ml12">
        <div class="flex-center">
          <span style="color: rgba(118, 120, 133, 1); line-height: 14px; margin-right: 4px">即将到期</span>
          <a-popover content="距离合同结束时间0-90天的合同" title="">
            <span class="iconfont icon-wenhao" style="color: rgba(207, 208, 214, 1); margin-bottom: -2px; font-size: 14px" />
          </a-popover>
        </div>
        <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ summary.willExpireCount || 0 }}</div>
      </div>
    </div>
    <div
      class="pv16 ph24 ml24 box"
      :style="{
        background: selectTypeIndex === 3 ? 'var(--primary10)' : 'rgba(250, 250, 250, 1)',
        'box-shadow': `inset 0px -4px 0px 0px ${selectTypeIndex === 3 ? 'var(--primary)' : 'rgba(250, 250, 250, 1)'}`
      }"
      @click="setType(3)"
    >
      <img src="./images/alreadyExpire.png" style="width: 32px; height: 32px" />
      <div class="ml12">
        <div class="flex-center">
          <span style="color: rgba(118, 120, 133, 1); line-height: 14px; margin-right: 4px">已到期且未续签</span>
          <a-popover content="在职员工存在已到期且未续签合同（除了合同类型是空类型、其它、无固定期限劳动合同）" title="">
            <span class="iconfont icon-wenhao" style="color: rgba(207, 208, 214, 1); margin-bottom: -2px; font-size: 14px" />
          </a-popover>
        </div>
        <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ summary.alreadyExpireCount || 0 }}</div>
      </div>
    </div>
    <div
      class="pv16 ph24 ml24 box"
      :style="{
        background: selectTypeIndex === 4 ? 'var(--primary10)' : 'rgba(250, 250, 250, 1)',
        'box-shadow': `inset 0px -4px 0px 0px ${selectTypeIndex === 4 ? 'var(--primary)' : 'rgba(250, 250, 250, 1)'}`
      }"
      @click="setType(4)"
    >
      <img src="./images/simple.png" style="width: 32px; height: 32px" />
      <div class="ml12">
        <div class="flex-center">
          <span style="color: rgba(118, 120, 133, 1); line-height: 14px; margin-right: 4px">单人合同大于等于两份</span>
          <a-popover content="合同类型仅包括固定期限劳动合同、劳务合同、劳务派遣合同" title="">
            <span class="iconfont icon-wenhao" style="color: rgba(207, 208, 214, 1); margin-bottom: -2px; font-size: 14px" />
          </a-popover>
        </div>
        <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ summary.exceedDoubleCount || 0 }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { selectElectronicAndPaperNumberReq } from "../api";
export default {
  name: "",
  components: {},
  mixins: [],
  props: ["selectTypeIndex"],
  data() {
    return {
      summary: {},
      loading: false
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadData();
  },
  mounted() {},
  methods: {
    loadData() {
      if (this.loading) {
        return false;
      }
      this.loading = true;
      selectElectronicAndPaperNumberReq([this.$store.state.hr.companyId])
        .then((res) => {
          if (res && res.data) {
            this.summary = res.data;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    setType(val) {
      this.$emit("typeChange", val);
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  flex: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}
</style>
